<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="{{ url_for('static', filename='/lib/layui/css/layui.css')}}" rel="stylesheet">
	<link href="{{ url_for('static', filename='/css/public.css')}}" rel="stylesheet">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">小组</label>
                            <div class="layui-input-inline">
                                <div id="demo1" name="demo1" autocomplete="off" class="layui-input"></div>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">设备ID</label>
                            <div class="layui-input-inline">
                                <div id="demo2" name="demo2" autocomplete="off" class="layui-input"></div>
                            </div>
                        </div>
						<div class="layui-inline" id="ID-laydate-range">
						  <label class="layui-form-label">开始日期</label>
						  <div class="layui-input-inline">
						    <input type="text" autocomplete="off" id="ID-laydate-start-date" name="start_date" class="layui-input">
						  </div>
						  <label class="layui-form-label">结束日期</label>
						  <div class="layui-input-inline">
						    <input type="text" autocomplete="off" id="ID-laydate-end-date" name="end_date" class="layui-input">
							</div>
						</div>
                        <div class="layui-inline">
                            <label class="layui-form-label">严重度</label>
                            <div class="layui-input-inline">
                                <select name="level">
                                      <option value=""></option>
                                      <option value="0">普通</option>
                                      <option value="1">严重</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="search"><i class="layui-icon"></i> 搜 索</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>

        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn beautiful-button layui-btn-sm data-add-btn" lay-event="additem""> 添加 </button>
                <button class="layui-btn layui-btn-sm beautiful-button data-delete-btn" lay-event="batchdelete"> 批量删除 </button>
            </div>
        </script>

        <table class="layui-hide" id="test" lay-filter="test"></table>

        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
        </script>

    </div>
</div>
<script src="{{ url_for('static', filename='/lib/layui/layui.js') }}"></script>
<script src="{{ url_for('static', filename='/js/xm-select.js') }}"></script>
<script>
	layui.use(function () {
        // var $ = layui.jquery,
        //     form = layui.form,
        //     table = layui.table;
			
		var table = layui.table;
		var $ = layui.$;
		var layer = layui.layer;
		var laydate = layui.laydate;
		var form = layui.form;	
		
		
		// 搜索提交
		form.on('submit(search)', function(data){
		  var field = data.field; // 获得表单字段
				console.log(field);
		  table.reload('test', {
		    page: {
		      curr: 1, // 重新从第 1 页开始
		    },
		    where: field, // 搜索的字段
		  });
		  return false; // 阻止默认 form 跳转
		});  
		
		
		$.getJSON("/getalarmlist",function(d){
				  console.log("测试下拉列表:",d);
				  if(d.code == 0){
					  console.log("再来测试下拉列表:",d);
					  var demo1 = xmSelect.render({
					  	el: '#demo1',
						filterable: true,
						// tips: '请输入module',
					  	prop: {
					  		name: 'module',
					  		value: 'module',
					  	},
						radio: true,
						name: 'module',
					  	data: d.data
					  })
					  $("#reset").click(function(){
						  demo1.setValue([])
					  });	  
				  }
				  else{
					  layer.msg(d.msg)
				  }
		})
		
		
		$.getJSON("/getequipmentlist",function(d){
				  console.log("测试设备下拉列表:",d);
				  if(d.code == 0){
					  console.log("再来测试设备下拉列表:",d);
					  var demo2 = xmSelect.render({
					  	el: '#demo2',
							filterable: true,
							// tips: '请输入设备id',
					  	prop: {
					  		name: 'name',
					  		value: 'name',
					  	},
							radio: true,
							name: 'equipment',
					  	data: d.data
					  })
						  $("#reset").click(function(){
						  	  demo2.setValue([])
						  });
								  
				  }
				  else{
					  layer.msg(d.msg)
				  }
		})
		
		
		laydate.render({
		    elem: '#ID-laydate-range',
		    range: ['#ID-laydate-start-date', '#ID-laydate-end-date']
		});
		



		// 表格数据渲染
		table.render({
		    elem: '#test',
		    id: 'test',  
		    url: '/api/equipment',
		    title:'设备报警统计',
			toolbar: '#toolbarDemo',
		    // toolbar:`
		    //   <div>
		    //     <button type="button" lay-event="batchdelete" class="layui-btn layui-btn-sm">批量删除</button>
		    //     <button type="button" lay-event="additem" class="layui-btn layui-btn-sm layui-bg-green">添加</button>
		        
		    //   </div>
		    // `,
			skin: 'line',
		    page:true,
			//分页定制化设置
		    // page:{
		    //   limit:5,
		    //   limits:[5,10,15,20],
		    //   prev:"上一页",
		    //   next:"下一页",
		    // },
		    cols: [[   // 标题栏
		            {type: 'checkbox', fixed: 'left'},
		            {title: 'id', field: 'id', hide:true},
		            {title: '组别', field: 'module', sort: true},
		            {title: '设备ID', field: 'name',sort: true},
		            {title: '报警日期', field: 'create_time',sort: true},
		            {title: '报警次数', field: 'value',sort: true},
		            {
		              title: '严重度',
		              sort: true,
		              templet: function(d){
		                return d.value>300?'<span class="layui-badge">严重</span>':'<span class="layui-badge layui-bg-green">普通</span>'
		              }
		     
		            },
					{title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"},
		            // {
		            //   title: '操作',
		            //   templet: function(d){
		            //     let s = '<button type="button" lay-event="edit" class="layui-btn layui-btn-xs layui-btn-normal">修改</button>'
		            //     s+= '<button type="button" lay-event="delete" class="layui-btn layui-btn-xs layui-bg-orange">删除</button>';
		            //     return s
		            //   }
		            //}
		    ]]
		});
		
		
		
		//头部工具栏
		table.on('toolbar(test)', function(obj){
		  let layEvent = obj.event;
		  if( layEvent == 'additem'){
		    //添加事件
		    layer.open({
		        title:"添加报警记录",
		        type:2,
		        content:'/api/equipment/add',
		        area: ['500px', '400px'],
					  end: function(){
						  table.reload("test")
					  }
		    });
		
		  }else if( layEvent == 'batchdelete'){
		    //批量删除
		    let id = obj.config.id;
		    let checkStatus = table.checkStatus(id);
		    let list = checkStatus.data
				  
		    if (list && list.length==0){
		        layer.msg("请选择要删除的数据");
		    }else{
		        layer.confirm('确定删除吗？',{btn: ['确定','关闭']},function(index){
		          let arr = [];
		          for (let i = 0; i < list.length; i++) {
		            arr.push(list[i].id)
		          }
		          var ids=JSON.stringify(arr);
		          $.ajax({
		            url: '/api/equipment/batchdelete',
		            type: 'POST',
		            //data:data_id,
		            data: {"ids":ids},
		            success: function(){ 
		                layer.msg("删除成功");
		                table.reload('test');
		                myChart.setOption(option, true); 
		            },
		          })
		          //关闭提示框
		          layer.close(index);
		        });            
		    }
		  }
		});  
		
		//单元格事件处理
		table.on('tool(test)', function(obj){
		  let layEvent = obj.event;
				console.log("obj.data.id:",obj.data.id)
		  if(layEvent == 'delete'){
		      //删除
		      layer.confirm('确定删除吗？',{btn: ['确定','关闭']},function(index){
		            //let equipmentId = obj.data.id
		             $.ajax({
		                url: '/api/equipment/delete/'+ obj.data.id,
		                type: 'POST', 
		                success: function(){
		                   layer.msg("删除成功"); 
		                   table.reload('test');
		                   myChart.setOption(option, true);  
		                }
		             });
		             //关闭提示框
		             layer.close(index);
		      });
		  }else if(layEvent == 'edit'){
					//更新事件
					layer.open({
					    title:"更新报警记录",
					    type:2,
					    content:'/api/equipment/edit/'+ obj.data.id,
					    area: ['500px', '400px'],
						end: function(){
							table.reload("test")
						},
						success: function(layero, index, that){
						    //获取弹出层jquery对象
							let body = layer.getChildFrame('body', index);
							// 给 iframe 页中的某个输入框赋值
							body.find('#id').val(obj.data.id);
							body.find('#module').val(obj.data.module);
							body.find('#name').val(obj.data.name);
							body.find('#create_time').val(obj.data.create_time)
							body.find('#value').val(obj.data.value);
							
							
						  }
						
					});
				};
		});
		
        // table.render({
        //     elem: '#currentTableId',
        //     url: '../api/table.json',
        //     toolbar: '#toolbarDemo',
        //     defaultToolbar: ['filter', 'exports', 'print', {
        //         title: '提示',
        //         layEvent: 'LAYTABLE_TIPS',
        //         icon: 'layui-icon-tips'
        //     }],
        //     cols: [[
        //         {type: "checkbox", width: 50},
        //         {field: 'id', width: 80, title: 'ID', sort: true},
        //         {field: 'username', width: 80, title: '用户名'},
        //         {field: 'sex', width: 80, title: '性别', sort: true},
        //         {field: 'city', width: 80, title: '城市'},
        //         {field: 'sign', title: '签名', minWidth: 150},
        //         {field: 'experience', width: 80, title: '积分', sort: true},
        //         {field: 'score', width: 80, title: '评分', sort: true},
        //         {field: 'classify', width: 80, title: '职业'},
        //         {field: 'wealth', width: 135, title: '财富', sort: true},
        //         {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
        //     ]],
        //     limits: [10, 15, 20, 25, 50, 100],
        //     limit: 15,
        //     page: true,
        //     skin: 'line'
        // });

        // 监听搜索操作
        // form.on('submit(data-search-btn)', function (data) {
        //     var result = JSON.stringify(data.field);
        //     layer.alert(result, {
        //         title: '最终的搜索信息'
        //     });

        //     //执行搜索重载
        //     table.reload('currentTableId', {
        //         page: {
        //             curr: 1
        //         }
        //         , where: {
        //             searchParams: result
        //         }
        //     }, 'data');

        //     return false;
        // });

		


        /**
         * toolbar监听事件
         */
        // table.on('toolbar(currentTableFilter)', function (obj) {
        //     if (obj.event === 'add') {  // 监听添加操作
        //         var index = layer.open({
        //             title: '添加用户',
        //             type: 2,
        //             shade: 0.2,
        //             maxmin:true,
        //             shadeClose: true,
        //             area: ['100%', '100%'],
        //             content: '../page/table/add.html',
        //         });
        //         $(window).on("resize", function () {
        //             layer.full(index);
        //         });
        //     } else if (obj.event === 'delete') {  // 监听删除操作
        //         var checkStatus = table.checkStatus('currentTableId')
        //             , data = checkStatus.data;
        //         layer.alert(JSON.stringify(data));
        //     }
        // });

        //监听表格复选框选择
        // table.on('checkbox(currentTableFilter)', function (obj) {
        //     console.log(obj)
        // });

        // table.on('tool(currentTableFilter)', function (obj) {
        //     var data = obj.data;
        //     if (obj.event === 'edit') {

        //         var index = layer.open({
        //             title: '编辑用户',
        //             type: 2,
        //             shade: 0.2,
        //             maxmin:true,
        //             shadeClose: true,
        //             area: ['100%', '100%'],
        //             content: '../page/table/edit.html',
        //         });
        //         $(window).on("resize", function () {
        //             layer.full(index);
        //         });
        //         return false;
        //     } else if (obj.event === 'delete') {
        //         layer.confirm('真的删除行么', function (index) {
        //             obj.del();
        //             layer.close(index);
        //         });
        //     }
        // });

    });
</script>

</body>
</html>